<template>
  <div class="course_card_container">
    <div v-for="course in courseList" :key="course" class="student_card">
      <div>
        <el-card>
          <!--标题-->
          <div slot="header" class="card_course_image_container">
            <img
                src="https://question.cos.xuanjis.com/livedream/livedream1.jpg"
                class="course_image"
            />
          </div>
          <div>
            <span class="course_text">老师：{{ course.courseTeacher }}</span>
            <br/>
            <span class="course_text">价格：{{ course.coursePrice }}</span>
            <br/>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Student",
  watch: {
    $route() {
      this.level = this.$route.params.level;
    },
    level() {
      console.log(this.level);
    }
  },
  data() {
    return {
      level: "",
      courseList: [
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        },
        {
          courseName: "信息学入门",
          courseTeacher: "杨老师",
          coursePrice: "100.00"
        }
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.course_card_container {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
}

.student_card {
  /*!* margin 改成下面这样就可以了 *!*/
  /*margin-top: 24px;*/
  /*width: 30%;*/
  /*margin-left: calc((100% - 3 * 30%) / 4);*/
  margin: 10px;

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .card_course_image_container {
    height: 90%;
    width: 90%;
    padding: 5%;
  }

  .course_image {
    height: 100%;
    width: 100%;
  }
}
</style>




